<template>
    <div class="find">
        <div class="nav">
            <div class="shortcut">
                <div class="left">
                    <span>19:50</span>
                </div>
                <div class="right">
                    <span class="iconfont icon-shengyinjingyin"></span>
                    <span class="iconfont icon-wifi"></span>
                    <span class="iconfont icon-dianliang"></span>
                </div>
            </div>
            <div class="navigation">
                <ul>
                    <li>推荐</li>
                    <li>小视频</li>
                    <li>原创</li>
                    <li>直播</li>
                    <li>视频</li>
                </ul>
            </div>
        </div>
        <div class="Carousel">
            <img src="@/assets/img/find/1.png" alt="">
        </div>
        <div class="press">
            <div class="word">
                <div class="comment">
                    <p>
                        首月销量破3000，选择<br>
                        北京越野BJ60的理由是。
                    </p>
                    <p class="p1">
                        <img src="@/assets/img/find/9.png" alt="">
                        星车场 3评论 #北京BJ60
                    </p>
                </div>
                <div class="photo">
                    <img src="@/assets/img/find/2.png" alt="">
                </div>
            </div>
        </div>
        <div class="community">
            <div class="head">
                <img src="@/assets/img/find/3.png" alt="">
                <div class="release">
                    <h4>奔驰C级社区</h4>
                    <p>所爱991 发布了</p>
                </div>
            </div>
            <div class="talk">
                <h2>买了奔驰C 已哭</h2>
                <p>
                    老祖宗的话说的是真的是有道理的，不听老<br>
                    人言，吃亏在眼前。之前还没有买奔驰C的<br>
                    时候就有好几个前辈劝我别买，说北奔不..
                </p>
                <img src="@/assets/img/find/4.png" alt="">
            </div>
            <div class="oil">
                <span>
                    <img src="@/assets/img/find/5.png" alt="">
                </span>
                <span>
                    <img src="@/assets/img/find/6.png" alt="">
                </span>
            </div>
        </div>
        <div class="cut-price">
            <h3>
                豪华SUV的价格屠夫！从30万降到17<br>
                万，2.0T+8AT，月薪5000买得起
            </h3>
            <img src="@/assets/img/find/7.png" alt="">
            <p>爱挚车辆 34评论 #奥迪Q3</p>
        </div>
        <div class="ad">
            <h3>B+级智慧豪华轿车    全新红旗H5</h3>
            <img src="@/assets/img/find/8.png" alt="">
            <div class="box">
                <p>广告</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
    .find{
        width: 100%;
        height: 1500px;
        background-color: #F6F6F6;
        .nav{
            width: 100%;
            height: 90px;
            background-color: #fff;
            .shortcut{
                display: flex;
                justify-content: space-between;
                padding-top: 20px;
                .left{
                    padding-left: 30px;
                }
                .right{
                    padding-right: 15px;
                }
            }
            .navigation{
                margin-top: 17px;
                margin-left: 20px;
                ul{
                    display: flex;
                    li{
                        padding-left: 25px;
                        font-weight: 700;
                    }
                }
            }
        }
        .Carousel{
            display: flex;
            justify-content: center;
            margin-top: 15px;
            img{
                width: 320px;
                height: 200px;
                border-radius: 10px;
            }
        }
        .press{
            width: 320px;
            height: 120px;
            background-color: #fff;
            border-radius: 10px;
            margin-top: 15px;
            margin-left: 45px;
            .word{
                display: flex;
                .comment{
                    p{
                        padding-top: 15px;
                        padding-left: 5px;
                        font-weight: 600;
                    }
                    .p1{
                        padding-top: 20px;
                        font-size: 12px;
                        color: #A19FAA;
                    }
                }
                .photo{
                    img{
                        width: 110px;
                        height: 80px;
                        padding-top: 20px;
                        padding-left: 10px;
                        border-radius: 10px;
                    }
                }
            }
        }
        .community{
            width: 320px;
            height: 340px;
            background-color: #fff;
            border-radius: 10px;
            margin-top: 15px;
            margin-left: 45px;
            .head{
                padding-top: 15px;
                padding-left: 10px;
                display: flex;
                img{
                    width: 70px;
                    height: 60px;
                }
                .release{
                    p{
                        color: #9B9B9D;
                    }
                }
            }
            .talk{
                padding-top: 10px;
                padding-left: 10px;
                img{
                    width: 300px;
                    height: 100px;
                }
            }
            .oil{
                padding-top: 15px;
                span{
                    padding-left: 90px;
                    img{
                        width: 30px;
                        height: 30px;
                    }
                }
            }
        }
        .cut-price{
            width: 320px;
            height: 320px;
            background-color: #fff;
            border-radius: 10px;
            margin-top: 15px;
            margin-left: 45px;
            h3{
                padding-top: 20px;
                padding-left: 10px;
            }
            img{
                padding-top: 10px;
                padding-left: 10px;
                width: 300px;
                height: 200px;
            }
            p{
                padding-left: 10px;
                padding-top: 10px;
                color: #BCC0C3;
            }
        }
        .ad{
            width: 320px;
            height: 250px;
            background-color: #fff;
            border-radius: 10px;
            margin-top: 15px;
            margin-left: 45px;
            h3{
                padding-top: 15px;
                padding-left: 10px;
            }
            img{
                padding-left: 10px;
                padding-top: 10px;
                width: 300px;
                height: 150px;
            }
            .box{
                width: 45px;
                height: 25px;
                border: 3px solid #BCC0C3;
                margin-left: 10px;
                margin-top: 10px;
                border-radius: 10px;
                p{
                    text-align: center;
                    color: #BCC0C3;
                }
            }
        }
    }
</style>